<template>
    <div id="Limited-bargaining">
      <mt-navbar v-model="selected" fixed>
        <mt-tab-item id="1" style="border-right: 1px solid #cccccc;"><span>砍价商品</span></mt-tab-item>
        <mt-tab-item id="2"><span>我的砍价</span></mt-tab-item>
      </mt-navbar>
      <p v-if="goods.length < 0" class="tc f14" style="margin-top: 45px;">您还未下任何的订单！！！</p>
      <mt-tab-container v-else style="margin-top: 50px;" v-model="selected">
        <mt-tab-container-item id="1">
          <ul v-infinite-scroll="loadMore"
              infinite-scroll-disabled="loading"
              infinite-scroll-distance="10"
          >
              <li @click="selectGood (good.id, 3)" v-for="good in goods" :key="good.index" class="pl13-pt13 pt15">
                <img :src="good.imgs"/>
                <div class="ml10">
                  <section>
                    <p class="f16 pt5" style="font-weight: 600">{{good.nam}}</p>
                    <p class="f12" style="color: #AEAEAE; padding: 10px 0;">价格值￥<span>{{good.prices}}</span></p>
                    <aside>
                      <p class="f13"><span style="color: #F54727;">150</span>人已免费拿</p>
                    </aside>
                  </section>
                  <section class="tr">
                     <mt-button class="mt50" size="small" type="danger">免费拿</mt-button>
                  </section>
                </div>
              </li>
          </ul>
          <p class="f12 tc pt5 pb5" style="color: #A2A2A2">我们也是有底线的</p>
        </mt-tab-container-item>
        <mt-tab-container-item id="2">
          <ul v-infinite-scroll="loadMore"
              infinite-scroll-disabled="loading"
              infinite-scroll-distance="10"
          >
            <li @click="selectGood (good.id)" v-for="good in goods" :key="good.index" class="pl13-pt13 pt15">
                <img :src="good.imgs"/>
                <div class="ml10">
                  <section>
                    <p class="f16 pt5" style="font-weight: 600">{{good.nam}}</p>
                    <p class="f12" style="color: #AEAEAE; padding: 10px 0;">已砍￥<span>{{good.prices}}</span></p>
                    <aside>
                      <p class="f13">还剩<span style="color:#F54727;">￥150</span></p>
                    </aside>
                  </section>
                  <section class="tr">
                     <header>
                        <p class="f10" style="color: #747474">剩余时间</p>
                        <p class="f14" style="color: #FD9E27"> 03:23:05</p>
                     </header>
                     <mt-button class="mt20" size="small" type="danger" style="background: #F54727;">继续砍</mt-button>
                  </section>
                </div>
              </li>
          </ul>
          <p class="f12 tc pt20 pb10" style="color: #A2A2A2">我们也是有底线的</p>
        </mt-tab-container-item>
      </mt-tab-container>
    </div>
</template>

<script type="ECMAScript 6">
    export default {
        name: 'Limited-bargaining',
        data () {
          return {
            loading: false,
            selected: '1',
            goods: ''
          };
        },
        methods: {
          selectGood (id, selected) {
            this.$router.push({
              path: '/index/limiterDetail',
              query: {goodId: id, selected: selected}
            });
          },
          loadMore () {
            this.loading = true;
            setTimeout(() => {
              this.loading = false;
            }, 2500);
          }
        },
        created () {
          this.$store.commit('alterShowBottomNav', 'false');
          if (!sessionStorage.getItem('goodsData')) {
            this.$router.push('/index');
          } else {
            this.goods = JSON.parse(sessionStorage.getItem('goodsData'));
          }
        }
    };
</script>

<style lang="stylus" scoped>
    #Limited-bargaining
      .mint-navbar
          padding 12px 0;
        .mint-tab-item
          padding 0;
          .mint-tab-item-label
            span
               line-height 19px;font-size: 16px;
        .is-selected
          border none; color #41B962;
      .mint-tab-container
        background #fff;
        ul
          li
            display flex;
            img
               width 100px; height 100px; border-radius 5px;
            &>div
                flex 1; display flex; border-bottom 1px solid #F2F2F2;
                section
                  flex 1;
                  aside
                     display flex; align-items center;
                     s
                        color #AEAEAE;
                  header
                    display inline-block; min-width 50%; text-align center;
                  .is-disabled
                     opacity 1;
                  .mint-button--danger
                      background #41B962;
                  .mint-button::after
                      background transparent;
</style>
